<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>2022年中国地震分布图</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
  <script src="https://js.arcgis.com/4.7/"></script>

  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
	
	#viewDiv_2d {
		float: left;		
		height: 100%;
		width: 49.9%;
	}
	
	#viewDiv_3d {
		float: right;
		height: 100%;
		width: 49.9%;				
	}

	#optionsDiv {
      background-color: dimgray;
      color: white;
      z-index: 23;
      position: absolute;
      top: 0px;
      right: 0px;
      padding: 20px 0px 0px 10px;
      border-bottom-left-radius: 5px;
      max-width: 350px;
    }
  </style>

  <script>
    require([
        "esri/views/MapView",
        "esri/views/SceneView", 
		"esri/WebMap",
		"esri/WebScene",
		"esri/layers/FeatureLayer",	
		"esri/layers/GraphicsLayer",
		"esri/symbols/SimpleMarkerSymbol",
		"esri/symbols/PointSymbol3D",
      	"esri/symbols/ObjectSymbol3DLayer",
		"esri/tasks/QueryTask",
		"esri/tasks/support/Query",
		"esri/widgets/Legend",		
		"dojo/dom",
		"dojo/on",
		"dojo/_base/array",
        "dojo/domReady!"
      ],
      function(
        MapView, SceneView, WebMap, WebScene, FeatureLayer, GraphicsLayer, SimpleMarkerSymbol, PointSymbol3D, ObjectSymbol3DLayer, QueryTask, Query, Legend, dom, on, arrayUtils
      ) {
	  
      	var view_2d, view_3d;
      	
		var results2DLyr = new GraphicsLayer();
		var results3DLyr = new GraphicsLayer();
	
		create_2dView();
		create_3dView();

		on(dom.byId("doBtn"),"click", query_2d3d);

       function create_2dView() {
			  var webmap = new WebMap({
				portalItem: {
				  id: "c5e5adde467b46829594d48a34c1945d"
				}
			  });
			  
			  view_2d = new MapView({
				map: webmap,
				container: "viewDiv_2d"
			  });

			view_2d.when(function() {
				var legend = new Legend({
					id: "legend_2d",
					 view: view_2d
				})
				view_2d.ui.add(legend, "bottom-right");
			
				webmap.add(results2DLyr);
				view_2d.watch("extent", function(response){
					if (response){
						view_3d.center = response.center;
					}
				});
				
				view_2d.watch("scale", function(response){
					if (response){
						view_3d.scale = response;
					}
				});

				view_2d.watch("rotation", function(response){
					if (response){
						view_3d.goTo({
							heading: 0 - response
						});
					}
				});
			})				  
		}
		
		function create_3dView() {
			  var scene = new WebScene({
				portalItem: {
				  id: "94ef775e3b0546aca9392d477e58e391"
				}
			  });
			  
			  view_3d = new SceneView({
				map: scene,
				container: "viewDiv_3d"
			  });
			  scene.add(results3DLyr);	

			  view_3d.when(function() {
				var legend3d = new Legend({
					id: "legend_3d",
					view: view_3d
				})
				view_3d.ui.add(legend3d, "bottom-right");
			  });			  
		}
		
		function query_2d3d(){
		
			var featureLayerUrl = view_2d.map.layers.items[0].url + "/" + view_2d.map.layers.items[0].layerId;
			
			<!-- var featureLayerUrl = "https://services3.arcgis.com/U26uBjSD32d7xvm2/arcgis/rest/services/2022%E5%B9%B4%E4%B8%AD%E5%9B%BD%E5%9C%B0%E9%9C%87%E5%8F%91%E7%94%9F%E5%88%86%E5%B8%83%E5%8F%8A%E9%9C%87%E7%BA%A7/FeatureServer?f=pjson&token=a94vKHbkB-J8wiVVblw75lLcBvmNNUNn0zUGtjEThGoGIPi_3E6IFC_TtQWokl0MBO0pSn7EjDogkngrgGR9766ZLKAk1_PnNl92y-CRJ5XlViL_AzZfDSxkKB-_YFtVUlTHtimElnyFqdvD6hKBzF-xDpikqWxU0i-Wh9R_AW6mgi5aI9lXgSyKrjMZkQO0F7UCYNcv4RiO2Mw-m6Y-1pAhZu37zie_VY4iBPECpH4U0SaWtdVx-Lmb-xRUxOzMR3M_rUh7dNd7F1h_gAgW1Q.." -->
			
			var qTask = new QueryTask({
		        url: featureLayerUrl
		    });
			var params = new Query({
	        	returnGeometry: true,
	        	outFields: ["*"]
	      	});

        	var expressionSign = dom.byId("signSelect");
      		var value = dom.byId("valSelect");

        	params.where = "震级_M_" + expressionSign.value + value.value;

	        qTask.execute(params)
	          .then(getResults)
	          .otherwise(promiseRejected);
		}

	      function getResults(response) {
	        // print the number of results returned to the user
	        dom.byId("printResults").innerHTML = response.features.length +
	          " results found!";

			displayResultsIn2D(response);
			displayResultsIn3D(response);
	      }

	      function promiseRejected(err) {
	        console.error("Query failed: ", err.message);
	      }
		  
		  function displayResultsIn2D(response) {
	      	results2DLyr.removeAll();

	        var featureResults2D = arrayUtils.map(response.features, function(feature) {
	          feature.symbol = new SimpleMarkerSymbol({
				  style: "circle",
				  color: "yellow",
				  size: "8px",
				  outline: {
				    color: [ 255, 255, 0 ],
				    width: 6
				  }
				});
	          return feature;
	        });
	        
	        results2DLyr.addMany(featureResults2D);
	        // animate to the results after they are added to the map  
	        view_2d.goTo(featureResults2D);		  
		  }
		  
		  function displayResultsIn3D(response) {
        	results3DLyr.removeAll();
	        var featureResults3D = arrayUtils.map(response.features, function(feature) {
	          var newFeature = feature.clone();
	          newFeature.symbol = new PointSymbol3D({
	            symbolLayers: [new ObjectSymbol3DLayer({
	              material: {
	                color: "yellow"
	              },
	              resource: {
	                primitive: "cone"
	              },
	              width: 300000,
	              height: 1000000
	            })]
	          });

	          return newFeature;
	        });

	        results3DLyr.addMany(featureResults3D);
		  }

      });
  </script>
</head>

<body>
	<div id="viewDiv_2d"></div>
	<div id="viewDiv_3d"></div>
	<div id="optionsDiv">
		震级
		<select id="signSelect">
			<option value=">">大于</option>
			<option value="<">小于</option>
			<option value="=">等于</option>
		</select>
		<input id="valSelect" value="2" />
		<br>
		<br>
		<button id="doBtn">查询</button>
		<br>
		<p><span id="printResults"></span></p>
	</div>
</body>

</html>